<!DOCTYPE html>
<html>
    <head>
        <title>Publisher Test Page</title>
        <link href="css/foundation.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <div id="demo">
            <div id="header" class="large-12 small-12 columns large-centered small-centered">
                <h2>toneden.js</h2>
                <h1>A fresh new customizable SoundCloud player.</h1>
            </div>
            <div id="debug">
            </div>
            <div id="player-container">
                <div id="player" class="large-6 small-12 small-centered large-centered columns">
                </div>
                <div id="player2" class="large-6 small-12 small-centered large-centered columns">
                </div>
            </div>
            <script>
                (function() {
                    var script = document.createElement('script');

                    script.type = 'text/javascript';
                    script.async = true;
                    script.src = '//widget.dev/toneden.loader.js';
                    //script.src = '//sd.toneden.io/production/toneden.loader.js';
                    //script.src = '//sd.toneden.io/dev/toneden.loader.js';

                    var entry = document.getElementsByTagName('script')[0];
                    entry.parentNode.insertBefore(script, entry);
                }());

                ToneDenReady = window.ToneDenReady || [];
                ToneDenReady.push(function() {
                    window.instance1 = ToneDen.player.create({
                        debug: true,
                        dom: '#player',
                        keyboardEvents: false,
                        urls: [
                            //'http://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
                            'https://soundcloud.com/fightclvb',
                            'http://soundcloud.com/mad-bae/lover',
                            'https://soundcloud.com/bz-rocks/02-kills',
                            'https://soundcloud.com/liquidcomplex/serum',
                            'https://soundcloud.com/liquidcomplex/london-grammar-metal-and-dust'
                        ],
                        single: false,
                        mini: false,
                        full: false,
                        skin: 'light',
                        soundcloudConsumerKey: 'ae1c0d2a28b3eae3bd0d11eb9e1704a4',
                        staticUrl: '//widget.dev/sdk/',
                        tracksPerArtist: 4,
                        visualizerType: 'waves',
                    });
                    ToneDen.player.create({
                        single: true,
                        dom: '#single-player-demo',
                        keyboardEvents: false,
                        urls: [
                            'https://soundcloud.com/wave-racer/wave-racer-streamers',
                        ]
                    });
                });
            </script>
            <br>
            <br>
            <div class="row">
                <div class="large-4 small-12 large-centered small-centered columns skin-change-container">
                    <a href="#" class="skin-change-btn active" id="light-btn" data-theme="light"></a>
                    <a href="#" class="skin-change-btn" id="dark-btn" data-theme="dark"></a>
                    <a href="#" class="skin-change-btn" id="slate-btn" data-theme="slate"></a>
                    <a href="#" class="skin-change-btn" id="aurora-btn" data-theme="aurora"></a>
                    <a href="#" class="skin-change-btn" id="mojave-btn" data-theme="mojave"></a>
                </div>
            </div>
        </div>
        <div id="player-banner">
            <div class="row">
                <div class="tagline"><p>Fully customizable, responsive, and extensible.</p></div>
                <div class="doc-sec large-10 small-12 columns large-centered" style="height: 450px;">
                    <h3>Basic usage:</h3>
                    <p><i class="fa fa-angle-right fw"></i> Add the following snippet of code to your page (before the closing <code>body</code> tag).</p>
                    <pre class="large-12 small-12 columns"><code class="large-12 small-12 columns javascript">&lt;script&gt;
        (function() {
            var script = document.createElement('script');

            script.type = 'text/javascript';
            script.async = true;
            script.src = '//sd.toneden.io/production/toneden.loader.js'

            var entry = document.getElementsByTagName('script')[0];
            entry.parentNode.insertBefore(script, entry);
        }());

        ToneDenReady = window.ToneDenReady || [];
        ToneDenReady.push(function() {
            // This is where all the action happens:
            ToneDen.player.create({
                dom: '#player',
                urls: [
                    'https://soundcloud.com/giraffage'
                ]
            });
        });
&lt;/script&gt;</code></pre>

                </div>

                <div class="doc-sec large-10 small-12 columns large-centered">
                    <h3>Player Configuration:</h3>
                    <p>There are several configuration options that you can explore. However <code>dom</code> and <code>urls</code> must be specified.</p>
                    <ul>
                        <li><code>dom</code>: The container in which you want your player to render in.</li>
                        <li><code>urls</code>: Urls to SoundCloud artist, tracks, or set. Parameter can take an array of multiple urls.</li>
                    </ul>
                    <p>Check out the <a href="https://github.com/ToneDen/tonedenplayer">documentation</a> for a full list of the config parameters and defaults.</p>
                </div>
                <div class="doc-sec large-10 small-12 columns large-centered">
                    <h3>Single Track Players:</h3>
                    <p>If you want to feature a single track instead of a playlist, the player will automatically default to the single player below if a single track url is provided.</p>
                    <p>You can also set <code>tracksPerArtist: 1</code> to force a single track to play for an artist url.</p>
                    <p><em>Example:</em></p>
                    <pre class="large-12 small-12 columns"><code class="javascript large-12 small-12 columns ">
 ToneDen.player.create({
    dom: '#player',
    urls: [
        'https://soundcloud.com/saintpepsi/unhappy'
    ]
});
                    </code></pre>
                    <p><em>Demo:</em></p>
                    <div id="single-player-demo"></div>
                </div>
                <div class="doc-sec large-10 small-12 columns large-centered">
                    <h3>Multiple Players:</h3>
                    <p>You can create as many players as you like by pushing multiple <code>ToneDen.player</code> objects to <code>ToneDenReady</code>.</p>
                    <p><em>Example:</em></p>
                    <pre class="large-12 small-12 columns"><code class="large-12 small-12 columns javascript">
ToneDenReady.push(function() {
        ToneDen.player.create({
            dom: '#player1',
            urls: [
                'https://soundcloud.com/giraffage'
            ]
        });
        ToneDen.player.create({
            dom: '#player2',
            urls: [
                'https://soundcloud.com/teendaze'
            ]
        });
        ToneDen.player.create({
            dom: '#player3',
            urls: [
                'https://soundcloud.com/beat-culture'
            ]
        });
    });
</code></pre>
                </div>
            </div>
        </div>
        <div id="tdsplash">
            <div class="row">
                <div class="large-12 small-12 columns large-centered small-centered">
                    <h4>Create your own custom player without the <code>codez</code></h4>
                    <h6>At ToneDen, we make it easy to show off your music. Make a free player for your tunes by syncing your SoundCloud.</h6>
                </div>
                <div class="large-10 small-12 columns large-centered small-centered showcase">
                    <div class="large-6 small-12 columns">
                        <a href="#" class="button large expand showcase-button">Learn More</a>
                    </div>
                    <div class="large-6 small-12 columns">
                        <a href="#" class="button large expand showcase-button">Connect with SoundCloud</a>
                    </div>
                </div>
            </div>
        </div>
        <script src="//yandex.st/highlightjs/8.0/highlight.min.js"></script>
        <!-- <script>hljs.initHighlightingOnLoad();</script> -->
        <script>
            $(document).ready(function() {
                $('.skin-change-btn').on('click', function() {
                    var id = $(this).attr('id');
                    var skin = $(this).attr('data-theme');

                    window.instance1.update({
                        skin: skin
                    });

                    $('.skin-change-btn').removeClass('active');
                    $(this).addClass('active');
                });
            });
        </script>
        </div>

    </body>
</html>
